import styled from 'styled-components';

const AddWrapper = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
`;

const ItemsWrapper = styled.div`
  color: ${props => props.theme.colors.text};
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center; 
  width: fit-content;
  min-width: 111px;
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  
  ::-webkit-scrollbar {
    height: 10px !important;
  }
   
  ::-webkit-scrollbar-thumb {
    background: #3b4d54;
    border-radius: 5px;
  }
  
  @media (min-width: 768px) {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
`;

const SettingsWrapper = styled.div`
  height: 100%;
  padding: 0 15px;
  display: flex;
  align-items: center;
`;

const ItemGroup = styled.div`
  padding: 8px 25px;

  * {
    cursor: pointer;
  }
`;

const ItemIcon = styled.div`
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
  padding-bottom: 3px;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;

  ${p => p.isIconNotProvided && `
    background-image: url('');
    background-size: cover;
    background-repeat: no-repeat;
  `}

  img {
    max-width: 100%;
  }
`;

const FieldGroup = styled.div`
  display: flex;
  flex-direction: column;
  jutifyContent: center;
  alignItems: center;
  margin: 20px;

  input {
    margin-left: auto;
    margin-right: auto;
  }
`;

const FieldCustomLabel = styled.label`
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
`;

export {
  AddWrapper, ItemsWrapper, SettingsWrapper, ItemGroup, ItemIcon, FieldCustomLabel, FieldGroup,
};